<template>
	<ul class="nav">
		<li>
			<!-- 本质上是一个a标签 -->
			<router-link to="/">首页</router-link>
		</li>
		<li>
			<router-link to="/about">关于我们</router-link>
		</li>
		<li>
			<!-- 本质上是一个a标签 -->
			<router-link to="/">首页</router-link>
		</li>
		<li>
			<button @click="back">后退</button>
			<button @click="forward">前进</button>
		</li>
		<li>
			<button @click="about">跳转到关于我们</button>
		</li>
	</ul>
	<router-view/>
</template>
<script>
import Item from './components/Item.vue'
import About from '@/components/About.vue'

export default {
	name: 'App',
	components:{
		Item,
		About
	},
	methods:{
		about(){
			this.$router.push({
				name:'About'
			})
		},
		back(){
			//this.$router.back();
			//后退一格
			this.$router.go(-1);
		},
		forward(){
			this.$router.forward(); 
		}
	}
};
</script>
<style scoped>
	.nav{
		width: 100%;
		height: 40px;
		line-height: 40px;
		list-style: none;
	}
	.nav > li{
		width: 100px;
		text-align: center;
		float: left;
	}
</style>
